// 封装图标Bar组件
import * as echarts from 'echarts'
import { useEffect, useRef } from 'react'

function Bar({ title, xData, yData, style }) {
  // console.log(title, xData, yData, style)
  const domRef = useRef(null)
  // 执行这个初始化的函数
  useEffect(() => {
    function chartInit() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(domRef.current)
      // 绘制图表
      myChart.setOption({
        title: {
          text: title,
        },
        tooltip: {},
        xAxis: {
          data: xData,
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: yData,
          },
        ],
      })
    }
    chartInit()
  }, [title, xData, yData, style])
  // 准备一个挂载的节点
  return <div ref={domRef} style={style}></div>
}

export default Bar
